<template>
    <uni-list-item direction="column">
        <!-- 头部包括tag、时间和图标 -->
        <view slot="header" class="basic-info-box padding-xs" @click="foldContent">
            <view class="cu-tag my-blur padding-tb radius" style="justify-self: flex-start;" :class="'bg-'+color">
                <view class="text-lg type-tag">{{typeName}}</view>
            </view>
            <view class="text-sm cu-tag radius" :class="'bg-'+color">{{notif.time.split(' ')[0]}}</view>
            <text class="padding-right-sm" :class="unfold?'cuIcon-fold':'cuIcon-unfold'"></text>
        </view>
        <!-- body包括内容、具体时间 -->
        <view slot="body" class="cu-card light radius quick-animation" :class="[unfold?'animation-fade':'', 'bg-'+color, unfold?'margin-top-sm':'']">
            <view class="padding-sm align-center" :style="{display:unfold ? 'flex':'none'}">
                <view style="flex-grow: 1;">
                    <rich-text :nodes="notif.content"></rich-text>
                    <text class="text-sm">{{notif.time.split(' ')[1]}}</text>
                </view>
            </view>
        </view>
    </uni-list-item>
</template>

<script>
import uniListItem from '@/components/third_party/uni-list-item/uni-list-item.vue';
export default {
    name: 'notif-item',
    components: {
        uniListItem
    },
    props: {
        notif: null,
        unfold: Boolean
    },
    data() {
        return {
        };
    },
    methods: {
        foldContent: function() {
            this.$emit('item-pressed');
        }
    },
    computed: {
        color: function() {
            let color = 'green';
            let type = this.notif.type.toLowerCase();
            if (type.indexOf('contest') != -1) {
                color = 'red';
            } else if (type.indexOf('answer') != -1) {
                color = 'blue';
            } else if (type.indexOf('claim')) {
                color = 'orange';
            }
            return color;
        },
        typeName: function() {
            let typeName = '其他通知';
            let type = this.notif.type.toLowerCase();
            if (type.indexOf('contest') != -1) {
                typeName = '课程通知';
            } else if (type.indexOf('answer') != -1) {
                typeName = '问题回复';
            } else if (type.indexOf('claim')) {
                typeName = '问题认领';
            }
            return typeName;
        }
    }
};
</script>

<style scoped>
    .basic-info-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        justify-content: space-between;
    }

    .quick-animation {
        animation-duration: .5s;
    }

    .my-blur::before {
        content: "";
        display: block;
        background: inherit;
        filter: blur(6px);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 5px;
        left: 5px;
        z-index: 0;
        opacity: 0.4;
        transform-origin: 0 0;
        border-radius: inherit;
        transform: scale(1, 1);
    }

    .type-tag {
        z-index: 1;
    }
</style>
